<script setup lang="ts">
import useEcharts from '@/hooks/useEcharts';
import { onMounted, ref, watchEffect } from 'vue';
// 接收父组件传递的参数
// withDefaults:设置默认值
const props = withDefaults(defineProps<{
    width?: string,
    height: string,
    options: any
}>(), {
    width: '100%',
    height: '360px'
})
// 定义ref属性
const commonEchartRef = ref<HTMLElement>()

onMounted(() => {
    // 叹号：断定commonEchartRef.value存在
    const { setOptions, resize } = useEcharts(commonEchartRef.value!)
    watchEffect(() => {
        setOptions(props.options)
    })
    // 自适应
    window.addEventListener('resize', () => {
        resize()
    })
})

</script>
<template>
    <div ref="commonEchartRef" :style="{ height: height, width: width }"></div>
</template>
<style lang="scss" scoped>
</style>